<template>
<!-- <img src="~img/whpu.png" class="logo"> -->
<nav-bar>
      <template v-slot:default>用户登录</template>
  </nav-bar>
  <div class="container">
    <!--form表单容器-->
    <div class="forms-container">
        <el-form :model="form" ref="lbLogin" label-width="80px"  :rules="rules" class="loginForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name" placeholder="请输入用户名..."></el-input>
          </el-form-item>
          <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码..."></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" class="submit-btn" @click="onSubmit('lbLogin')">登录</el-button>
          </el-form-item>
        </el-form>
        <!--找加密码-->
        <div class="tiparea">
	<p>忘记密码？<a href="#">立即找回</a>&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="/register">注册</a></p>
        </div>

      </div>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import NavBar from '../../components/common/navbar/NavBar.vue'
export default {
  components:{
    NavBar
  },
  setup () {
    const state = reactive({
      form: {
        name: '',
        password: ''
      },
      rules: { 							// 校验规则
        name: [
          {
            required: true,				// 表单不能为空
            message: '请输入用户名',		// 验证错误，在页面上显示的错误信息
            trigger: 'blur'				// 失去焦点时触发
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    })
    const { ctx } = getCurrentInstance()
    const router = useRouter()
    // 用户单击提交按钮的触发方法
    const onSubmit = (formName) => {
      ctx.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get('/api/login.php',{
              params: {
                username: state.form.name,
                password: state.form.password,
              }
            }).then(res =>{
              console.log(res.data)
              if (res.data) {         // 返回true或者false
                localStorage.setItem('username',state.form.name)
                router.go(0)			
                alert("登录成功")
              } else {
                ElMessage({
                  message: '用户名和密码错误，重新输入',
                  center: true,
                  type: 'error',
                  offset: 100,
                  showClose: true,
                  duration: 5000
                 });
              }
            }).catch(
              error => {
                window.console.log("失败"+error)
            })
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    return {
      ...toRefs(state),
      onSubmit
    }
  }
}
</script>

<style scoped>
.logo{
    width: 70%;
    margin-top:75px;
}
.container{
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 300px;
  overflow: hidden;
}
.forms-container{
  width: 100%;
  margin:50px auto;
  padding: 20px;
  /* border:1px solid #dcdfe6;
  border-radius: 6px;
  box-shadow: 5px 5px 30px #dcdfe6; */
}
.login-title{
  text-align: center;
  font-weight: bolder;
  margin-bottom: 30px;
}
.submit-btn{
  width: 100%;
}
.tiparea{
  text-align: right;
  font-size: 12px;
  color: #333;
}
.tiparea p a{
  color: #409eff;
  text-decoration: none;
}
</style>